<template >

<scroll-view @scroll="scroll" scroll-y="true" style="position:relative;" @scrolltolower="onReachBottom" class="container"  >
  <div :style="{'background-image': 'url(' +storeData.storeImgUrl + ') ' ,'background-size':'100% 100%' }"  class="top">
   <div style="width:100%;height:100%;position:absolute;left:0;right:0;background:#000;opacity:0.2;"></div>
        <div  style="height:30px;padding-top:6px;padding-bottom:4px;position:absolute;" class="search-header-box">
                <view  class="search">
                      <navigator  hover-class="none" :url="'/pages/search/search?storeId='+storeId+'&storeLevel='+storeLevel " class="input">
                          <img class="icon"/>
                          <text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
                      </navigator>
                  </view>
        </div>
    <div class="left">
        <img class="header" :src="storeData.storeAvatarUrl" alt="">
        <div style="margin-left:10px;width:50vw;float:left"> 
           <p class="name">{{storeData.storeName}}</p>
          <img class="pname" :src="'/static/images/buyHome/'+storeLevel+'.png'" /> 
        </div>
      
    </div>
    <div class="right">
            <div >
              <p>{{storeData.fansNum}}</p>
              <p>粉丝</p>
            </div>
            <div @click='AddFollowStore' :style="{'float':'right','background':FollowStoreColor,'color':FollowStorefont}">
              {{FollowStoreis}}
            </div>
    </div>

  </div>
  <div :style="{'position':fixed,'top':fixedTop}" class="topNav">
      <div @click='toList(index)' :class='{Cnav:index==thisclick0}' style="height:70px;" class="list" v-for='(val,index) in topNav' :key='index'>
         <img v-if="index!=thisclick0" :src="'/static/images/buyHome/a'+index+'.png '" alt="">
         <img v-else :src="'/static/images/buyHome/b'+index+'.png '" alt="">
        <span>{{val}}</span>
       
      
      </div>
      <div class="mobile"  :animation="animation"></div>
  </div>

 
<view  >
  <div class="wh"  :style="{'height':fixedTop2,'paddingTop':'1px'}"></div>
  <div class="wh"  :style="{'height':fixedTop3 }"></div>
   
  <!-- <div style="height:60px;"></div> -->
  <div v-if="thisclick0==1" :style="{'position':fixed,'top':fixedTop2,  'line-height': '44px','height': '44px'}" class="nav" >
      <span @click="navClick(index)"  :class='{Cnav:index==thisclick}' v-for="(val,index) in navarr" :key="index">{{val}} 
        <img v-if="val=='价格' "  style="height:15px;width:10.5px;" :src="priceh"/>
      </span>
    
  </div>
         <div v-if='thisclick0==0' :style="{'background':ulBag,'padding-top':'15px'}" class="select">
                <div style="width:100px;height:30px;margin: 0 auto;margin-bottom:15px;position:relative; text-align:center;lin-height:30px;font-size:16px;color:#333333;"   >
                  新品推荐
                  <img style="position:absolute;width:100%;height:100%;left:0;top:0" :src="containerImg" alt="">
                </div>
                
                <ul >
                         <li  style="width:44vw;"  v-for="(item,index) in storeData.newProduct" :key="index"> 
                             <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div style="border:0.5vw solid #fff;background:#D2ECFF;"  class='pic'>
                                                <img style="width:43vw;height:50vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div style="text-align:center;color：#333333;padding-top:15px;padding-bottom:15px;background:#D2ECFF;">
                                        <p> <span style="font-size:12px;">惊喜价</span> <span style="font-size:18px;font-weight:500;">￥{{item.price}}  </span> </p>    
                                   </div>
                             </navigator>
                            </li>
                </ul>
                 <div style="width:100px;height:30px;margin: 0 auto;margin-bottom:15px;position:relative; text-align:center;lin-height:30px;font-size:16px;color:#333333;" >
                  销量排行
                   <img style="position:absolute;width:100%;height:100%;left:0;top:0" :src="containerImg" alt="">
                </div>
                
                  <ul >
                         <li  style="width:44vw;"  v-for="(item,index) in storeData.salesRanking" :key="index"> 
                             <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div style="border:0.5vw solid #fff;background:#D2ECFF;"  class='pic'>
                                                <img style="width:43vw;height:50vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div style="text-align:center;color：#333333;padding-top:15px;padding-bottom:15px;background:#D2ECFF;">
                                        <p> <span style="font-size:12px;">惊喜价</span> <span style="font-size:18px;font-weight:500;">￥{{item.price}}  </span> </p>    
                                   </div>
                             </navigator>
                            </li>
                    </ul>

       </div>
       <div style="padding-top:15px;" v-if='thisclick0!=0' class="select">
          <ul >
                         <li    v-for="(item,index) in items" :key="index"> 
                             <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div   class='pic'>
                                                <img style="width:44vw;height:44vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div class='bottom'>
                                        <p style="text-indent: 0;"  >{{item.productName }}</p>
                                        <p class='MBprice'> <span>￥{{item.price}} </span> <span>{{item.orderCount}}人已付款</span> </p>
                                            
                                </div>
                             </navigator>
                            </li>
              
             </ul>
       </div>
</view>
    <view class="search-result-empty" v-if="!goodsList.length && searchStatus">
      <img class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noSearchResult-7572a94f32.png"/>
      <text class="text">您寻找的商品还未上架</text>
    </view>
</scroll-view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
// import sortGoods from '@/components/sortGoods'

export default {
  components: {
    // sortGoods
  },
  data () {
    return {
      ulBag:'#D2ECFF',
      searchColor:'rgba(253,109,31,0)',
      containerImg:'/static/images/buyHome/container.png',
      FollowStorefont:'',
      fixed:'',
      fixedTop:'',
      thisclick0:0,
      fixedTop2:'',
      fixedTop3:'',
      animation:'',
      translateX:'ranslateX(0px)',
      topNav:['店铺首页','全部宝贝','新品上新','视频直播'],
      storeData:'',
      priceh:'/static/images/priceh1.png',
      navarr:['综合','销量','新品','价格'],
      searchStatus: false,
      goodsList: [],
      page: 1,
      size: 20,
      timer: null,
      items:[],
      orderBy:1,
      thisclick:0,
      windowWidth:'',
      FollowStoreis:'关注',
      FollowStoreColor:'',
      storeId:'',
      storeLevel:'',
      loadingBt:false,
      iosIf:false
    }
  },
  onShow(){

 
      this.animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration:0, //初始动画时间
      timingFunction: "ease",
      delay: 0
    })
     this.getSearchKeyword()
    this.storeId=this.$route.query.storeId;
   this.FollowStore()
    this.gethome()

  },
  onReady(){
 let that =this
      wx.getSystemInfo({
              success: function (res) {
                if(res.system.slice(0,3)=='iOS'){
                    that.iosIf=true;
                }
               
            
              }
        })　
  },
   onUnload:function(){ // 退出清空列表  销毁页面
     this.items=[];
     this.thisclick0=0;
     this.thisclick=0;
     this.fixedTop2='';
     this.page=1;
     this.FollowStorefont='';
     this.fixed='';
     this.fixedTop='';
  },
  

  methods: {
      onReachBottom(){
        if(this.loadingBt){
          this.getSearchKeyword() // 底部上拉加载
        }
    
  },
    scroll(e){
    // console.log(e.target.scrollTop)
    //  console.log(e.target.scrollWidth*0.4 )

    //  let swidthTop=e.target.scrollWidth/375*40
    //  if(this.windowWidth==''){
    //    this.windowWidth=e.target.scrollWidth;
    //  }
        if(this.iosIf==false){
            return false
          }
      if(e.target.scrollTop>=e.target.scrollWidth*0.4){
          this.fixed='fixed';
          this.fixedTop=0;
          if(this.thisclick0==1){
               this.fixedTop2='70px';
               this.fixedTop3='42px'
          }else{
            this.fixedTop2='70px';
          }
       
      }else{
        this.fixed=''
        this.fixedTop=''
        this.fixedTop2=''
        this.fixedTop3=''
      }
             let op=e.target.scrollTop/60
      this.searchColor="rgba(253,109,31,"+op+")"
    },
    toList(index){
       if(index!=3){
      this.translateX='ranslateX(300px)';
       let left =0.25*wx.getSystemInfoSync().windowWidth*index ;
       this.animationEvents(left) ;
       this.thisclick0=index;
         if(index==2){
           this.orderBy=2;
           this.getSearchKeyword();
         }
         
    }else{
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: '敬请期待',
            mask: true
          });
      }
    },
   
    navClick(index){
      if( this.thisclick==index&&this.thisclick!=3){
        return false ;
      }
      this.thisclick=index;
          let lIN=''
          if(index!=0&&index!=3){
            lIN=index;
          }else{
             if(this.priceh=='/static/images/priceh1.png'){
                  this.priceh='/static/images/priceh2.png'
                  lIN=4
             }else{
               this.priceh='/static/images/priceh1.png'
                lIN=3
             }
          }
      this.page=1;
      this.orderBy=lIN;
      this.items=[];
      this.getSearchKeyword();
    },
  animationEvents(moveY){
      // console.log("moveY:" + moveY + "\nshow:" + show,'开始');
      this.animation = wx.createAnimation({ // 可重复使用
        transformOrigin: "50% 50%",
        duration: 350,
        timingFunction: "ease",
        delay: 0
      }
      )
      this.animation.left(moveY + 'px').step()
    },
    async gethome(){
       let data=JSON.stringify({'storeId':this.$route.query.storeId})
      const res = await api.GetHomePage({"data":data});
      this.storeData=res.data;
      this.storeLevel=res.data.storeLevel
    },
    async FollowStore(){ // 判断是否关注
       let data=JSON.stringify({'storeId':this.$route.query.storeId})
      const res = await api.HaveFollowStore({"data":data});
      if(res.data){
         this.FollowStoreis='关注中';
         this.FollowStoreColor='#fff';
         this.FollowStorefont='#FD6D1F';
      }else{
        this.FollowStoreis='关注';
        this.FollowStoreColor='#FD6D1F';
        this.FollowStorefont='#fff';
      }
      
    },
    async AddFollowStore(){ // 判断是否关注
          if(this.FollowStoreis=='关注'){
              let data=JSON.stringify({'storeId':this.$route.query.storeId})
              const res = await api.AddFollowStore({"data":data});
              this.FollowStoreis='关注中';
               this.FollowStoreColor='#fff';
               this.FollowStorefont='#FD6D1F';
               this.storeData.fansNum=parseInt(this.storeData.fansNum) +1 ;
              }else{
                let data=JSON.stringify({'storeId':this.$route.query.storeId})
                const res = await api.DelFollowStore({"data":data});
                this.FollowStoreis='关注'
                  this.FollowStoreColor='#FD6D1F';
                   this.FollowStorefont='#fff';
                   this.storeData.fansNum=parseInt(this.storeData.fansNum) -1 ;
            }
    },
    
    // 列表
    async getSearchKeyword () {
  
        let data=JSON.stringify({  "pageIndex":this.page, "pageSize":"10",'storeId':this.$route.query.storeId, "orderBy":this.orderBy})
      const res = await api.AllProductList({"data":data});
      this.items = this.items.concat(res.data);
                   if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt = true;
                    }else{
                      this.loadingBt = false;
                    }
     
    },
  
 
  
    // 获得搜索结果的商品列表
 
 
 
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: this.storeData.fansNum,
      desc: '大风车商场',
      path: '/pages/merchants/merchants?storeId='+this.$route.query.storeId
    }
  },
 
}
</script>

<style lang='scss'>

page{
  min-height: 100%;
  background-color: #f4f4f4;
}
.mobile{
      transition-duration: 0.2s;
      width: 25vw;;
      height: 2px;
      background: #FD6D1F;
      position: absolute;
      bottom:0;
      left: 0;


      
}
.topNav{
    position: relative;
    width:100vw;
    background:#fff;
    z-index: 999;
  }
    .list{
        width:25%;
        display: inline-block;
        height: 70px;;
        text-align: center;
        font-size: 13px;
         color: #333333;
        img{
          height: 16px;
          width: 16px;
          display: block;
          margin: 0 auto;
          margin-top: 15px;
        }
        span{
         
          font-size: 13px;
          line-height: 38px;
        }
      }


.top{
  height: 40vw;;
  width: 100vw;
  position: relative;
  .left{
    height:50px; 
    position: absolute;
    left: 10px;
    bottom:7px;
    z-index: 9;
     .header{
        width: 50px;;
        height: 50px;;
         float: left;
      }
    .name{
        font-size: 15px;
        color:#fff;
        padding-bottom: 10px;  
        overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .pname{
        width: 66px;
        height: 20px;
        display: block
    }
  }
  .right{
      z-index: 9;
    position: absolute;
    right: 10px;
    bottom: 10px;;
    width: 25vw;;
    height: 30px;
    div:nth-child(1){
      float:left;
      font-size:14px;
      color:#fff;
      width: 33px;;
      text-align: center;
     
    }
    div:nth-child(2){
      width: 55px;
      height: 24px;;
      border-radius:2px;
      background: #fff;
      color: #FD6D1F;
      font-size: 14px;
      text-align: center;
      line-height: 24px;
      margin-top:7px; 
    }
  }
}
.select{

    .title{
        text-indent: 15px;
           height: 55px;
            color: #333333;
            font-size: 14px;
            line-height: 55px;
            background: #fff;
            margin-bottom: 15px;
    }
 
 ul {
 
  font-size: 0;
  li {
    width: 44vw;
    margin-left: 4vw;
    margin-bottom:4vw;
    display: inline-block;
    background-color: #fff;
    // background:rgba(255,209,232,1);
box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.11);
    .bottom {
      width: 90%;
      margin: 0 auto;

    
    .pic {
      width: 48vw;
      height: 48vw;
    }
        p:nth-child(1) {
        color: #000;
        font-size: 12px;
        line-height: 14px;
          overflow: hidden;
          height: 28px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
            margin-bottom: 6px;
            margin-top:8px;
        }

  }     
  .MBprice{
      padding-bottom: 9px;
    
      span:nth-child(1){
          color: #FD6D1F;
          font-size: 14px;

      }
       span:nth-child(2){
          color: #333333;
          font-size: 12px;
         float:right;
      }
  }
  
  }
}
}
.container{
  height: 100vh;
  background-color: #f4f4f4;
}
.nav{

  border-bottom:1px solid rgba(51,51,51,0.1);
  color: #333333;
  font-size: 15px;
 
 
  width: 100vw;
 
  background: #fff;
  z-index: 99;;
  span{
    width: 25%;
    float: left;
    text-align: center;

  }
}
.Cnav{
  color: #FD6D1F;
}
.search-header-box{
 position: fixed;
  padding-top: 6px;
  color: #333;
  padding-bottom: 4px;
  width: 100vw;
  top:0;
  height: 30px;;
  z-index:999;
}
.search-header{
   
    width: 72vw;
 
    left: 0;
    right: 0;
    display: flex;
    margin:auto;
    overflow: hidden;
    border-radius: 50px;
    font-size: 29rpx;
   
   
}

.search-header .input-box{
    position: relative;
     
    float: left;
    width: 0;
    flex: 1;
    height: 59rpx;
    line-height: 59rpx;
    padding: 0 20rpx;
    background: #f4f4f4;
}
.search {
 
}

.search .input {
  width: 72vw;
  height: 56rpx;
  background: #fff;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;

}

.search .icon {
  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png) center no-repeat;
  background-size: 100%;
  width: 28rpx;
  height: 28rpx;
}

.search .txt {
  height: 42rpx;
  line-height: 42rpx;
  color: #666;
  padding-left: 10rpx;
  font-size: 30rpx;
}
.no-search{
    height: auto;
    overflow: hidden;
    margin-top: 91rpx;
}

.serach-keywords{
    background: #fff;
    width: 750rpx;
    height: auto;
    overflow: hidden;
    margin-bottom: 20rpx;
}

.serach-keywords .h{
    padding: 0 31.25rpx;
    height: 93rpx;
    line-height: 93rpx;
    width: 95%;
    color: #999;
    font-size: 29rpx;
}

.serach-keywords .title{
    display: block;
    width: 120rpx;
    float: left;
}

.serach-keywords .icon{
    margin-top: 19rpx;
    float: right;
    display: block;
    margin-left: 511rpx;
    height: 55rpx;
    width: 55rpx;
}

.serach-keywords .b{
    width: 750rpx;
    height: auto;
    overflow: hidden;
    padding-left: 31.25rpx;
}

.serach-keywords .item{
    display: inline-block;
    width: auto;
    height: 48rpx;
    line-height: 48rpx;
    padding:0 15rpx;
    border: 1px solid #999;
    margin: 0 31.25rpx 31.25rpx 0;
    font-size: 24rpx;
    color: #333;
}

.serach-keywords .item.active{
    color: #b4282d;
    border: 1px solid #b4282d;
}

.shelper-list{
    width: 750rpx;
    height: auto;
    overflow: hidden;
    background: #fff;
    padding: 0 31.25rpx;
}

.shelper-list .item{
    height: 93rpx;
    width: 687.5rpx;
    line-height: 93rpx;
    font-size: 24rpx;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
}

.search-result-empty{
    width: 100%;
    height: 100%;
    padding-top: 300rpx;
}

.search-result-empty .icon{
    margin: 0 auto;
    display: block;
    width: 240rpx;
    height: 240rpx;
}

.search-result-empty .text{
    display: block;
    width: 100%;
    height: 40rpx;
    font-size: 28rpx;
    text-align: center;
    color: #999;
}
</style>
